<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="tableReqForm">
        <el-row :gutter="10">
          <el-form-item label="货架名称">
            <el-input v-model="tableReqForm.shelveName"></el-input>
          </el-form-item>
          <el-form-item label="所属堆垛机名称">
            <el-input v-model="tableReqForm.stackerName"></el-input>
          </el-form-item>
          <el-button class="searchbtn" @click="getShelveList" type="primary" icon="el-icon-search">搜索</el-button>
        </el-row>
      </el-form>
      <el-row :gutter="10">
        <!--添加货架-->
        <el-col :span="24" style="text-align: right;">
          <el-button type="primary" size="mini"  @click="addShelveBtnClick">添加货架</el-button>
        </el-col>
      </el-row>
      <el-table :data="shelveList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="货架名称" prop="shelveName" min-width="200"></el-table-column>
        <el-table-column label="所属仓库" prop="warehouseName" min-width="200"></el-table-column>
        <el-table-column label="货架所属堆垛机名" prop="stackerName" min-width="200"></el-table-column>
        <el-table-column label="货架总列数" prop="shelveWidth" min-width="200"></el-table-column>
        <el-table-column label="货架总层数" prop="shelveHeight" min-width="200"></el-table-column>
        <el-table-column label="货架PLC地址值" prop="shelvePlcValue" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editClick(scope.row)" >编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :total="total">
      </el-pagination>
    </el-card>
    <el-dialog v-dialogDrag title="添加货架" :visible.sync="addShelveDialog" width="40%" center @closed="addShelveDialogClosed" @opened="addShelveDialogOpen"
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="addShelveFormRef" :model="addShelveForm" :rules="addShelveFormRules" label-position="right"
          label-width="110px">
          <el-form-item label="货架名称" prop="shelveName" v-on:keyup.enter.native="addShelve">
            <el-input v-model="addShelveForm.shelveName"></el-input>
          </el-form-item>
          <el-form-item label="所属仓库名" prop="warehouseName" v-on:keyup.enter.native="addShelve">
            <div style="text-align: left;">
              <el-select v-model="addShelveForm.warehouseName" placeholder="请选择" >
                <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseName"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="所属堆垛机名" prop="stackerName" v-on:keyup.enter.native="addShelve">
            <el-input v-model="addShelveForm.stackerName"></el-input>
          </el-form-item>
          <el-form-item label="货架总列数" prop="shelveWidth" v-on:keyup.enter.native="addShelve">
            <el-input v-model="addShelveForm.shelveWidth"></el-input>
          </el-form-item>
          <el-form-item label="货架总层数" prop="shelveHeight" v-on:keyup.enter.native="addShelve">
            <el-input v-model="addShelveForm.shelveHeight"></el-input>
          </el-form-item>
          <el-form-item label="PLC地址值" prop="shelvePlcValue" v-on:keyup.enter.native="addShelve">
            <el-input v-model="addShelveForm.shelvePlcValue"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addShelve">提交</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑货架" :visible.sync="editShelveDialog" width="40%"
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="editShelveFormRef" :model="editShelveForm" :rules="addShelveFormRules" label-position="right"
          label-width="110px">
          <el-form-item label="货架名称" prop="shelveName" v-on:keyup.enter.native="editShelve">
            <el-input  v-model="editShelveForm.shelveName"></el-input>
          </el-form-item>
          <el-form-item label="所属仓库名" prop="warehouseName" v-on:keyup.enter.native="editShelve">
            <div style="text-align: left;">
              <el-select v-model="editShelveForm.warehouseName" placeholder="请选择" >
                <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseName"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="所属堆垛机名" prop="stackerName" v-on:keyup.enter.native="editShelve">
            <el-input v-model="editShelveForm.stackerName"></el-input>
          </el-form-item>
          <el-form-item label="货架总列数" prop="shelveWidth" v-on:keyup.enter.native="editShelve">
            <el-input v-model="editShelveForm.shelveWidth"></el-input>
          </el-form-item>
          <el-form-item label="货架总层数" prop="shelveHeight" v-on:keyup.enter.native="editShelve">
            <el-input v-model="editShelveForm.shelveHeight"></el-input>
          </el-form-item>
          <el-form-item label="PLC地址值" prop="shelvePlcValue" v-on:keyup.enter.native="editShelve">
            <el-input v-model="editShelveForm.shelvePlcValue"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="editShelve">提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Shelve',
  data () {
    return {
      addShelveDialog: false,
      editShelveDialog: false,
      value: '',
      warehouseList: [],
      tableReqForm: {
        pageNum: 1,
        pageSize: 10,
        shelveName: '',
        warehouseName: '',
        stackerName: ''
      },
      total: 0,
      shelveList: [],
      addShelveForm: {
        shelveName: '',
        warehouseName: '',
        stackerName: '',
        shelveWidth: '',
        shelveHeight: '',
        shelvePlcValue: ''
      },
      editShelveForm: {
        shelveId: '',
        shelveName: '',
        warehouseName: '',
        stackerName: '',
        shelveWidth: '',
        shelveHeight: '',
        shelvePlcValue: ''
      },
      addShelveFormRules: {
        shelveName: [{
          required: true,
          message: '请输入货架名称',
          trigger: 'blur'
        }],
        warehouseName: [{
          required: true,
          message: '请输入所属仓库名',
          trigger: 'blur'
        }],
        stackerName: [{
          required: true,
          message: '请输入所属堆垛机名',
          trigger: 'blur'
        }],
        shelveWidth: [{
          required: true,
          message: '请输入货架总列数',
          trigger: 'blur'
        }],
        shelveHeight: [{
          required: true,
          message: '请输入货架总层数',
          trigger: 'blur'
        }],
        shelvePlcValue: [{
          required: true,
          message: '请输入货架PLC地址值',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getShelveList () {
      const res = await this.$apiUtil.postByJson('shelve/getShelveList', this.tableReqForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.shelveList = res.data.shelveVOS
      this.total = res.data.totalSize
    },
    async addShelveBtnClick () {
      this.addShelveDialog = true
      const res = await this.$apiUtil.get('warehouse/getAllWarehouse', {})
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.warehouseList = res.data
    },
    addShelveDialogClosed () {
      this.$refs.addShelveFormRef.resetFields()
    },
    addShelveDialogOpen () {
      if (this.$refs.userRegisterFormRef !== undefined) {
        this.$refs.userRegisterFormRef.resetFields()
      }
    },
    async addShelve () {
      const res = await this.$apiUtil.postByJson('shelve/addShelve', this.addShelveForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('添加货架成功')
      this.getShelveList()
      this.addShelveDialog = false
    },
    async editShelve () {
      const res = await this.$apiUtil.postByJson('shelve/editShelve', this.editShelveForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑货架成功')
      this.getShelveList()
      this.editShelveDialog = false
    },
    async editClick (row) {
      this.editShelveForm.shelveId = row.shelveId
      this.editShelveForm.shelveName = row.shelveName
      this.editShelveForm.shelveCode = row.shelveCode
      this.editShelveForm.warehouseName = row.warehouseName
      this.editShelveForm.stackerName = row.stackerName
      this.editShelveForm.shelveWidth = row.shelveWidth
      this.editShelveForm.shelveHeight = row.shelveHeight
      this.editShelveForm.shelvePlcValue = row.shelvePlcValue
      this.editShelveDialog = true
      const res = await this.$apiUtil.get('warehouse/getAllWarehouse', {})
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.warehouseList = res.data
    },
    deleteClick (row) {
      this.$alert('确定删除货架:' + row.shelveName + ' ?', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            console.log(row)
            const res = await this.$apiUtil.postByForm('shelve/deleteShelve', { shelveId: row.shelveId })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除货架' + row.shelveName + '成功')
            this.getShelveList()
          }
        }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  created () {
    this.getShelveList()
  }
}
</script>

<style lang="less" scoped>
</style>
